<template>
    <el-dialog v-model="editclient" top="20px" :show-close="false" :modal-append-to-body="false" class="em">
        <h1 class="title">编辑客户</h1>
        <div class="info-body">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="form-info" :size="formSize">
                <el-form-item label="客户名称" prop="cname">
                    <el-input  v-model="ruleForm.cname" placeholder="请输入顾客名称" class="cname"/>
                </el-form-item>
                <el-form-item label="客户地址" prop="caddress">
                    <el-input  v-model="ruleForm.caddress" placeholder="请输入顾客地址" class="cadd" />
                </el-form-item>
                <el-form-item label="联系方式" prop="cphone">
                    <el-input  v-model="ruleForm.cphone" placeholder="请输入联系方式" class="cphone" />
                </el-form-item>
                <el-form-item label="水票数量" prop="num">
                    <el-input-number  v-model="ruleForm.num" :min="0" class="num"/>
                </el-form-item>
            </el-form>
        </div>
        <br><br>
        <div>
            <el-button type="primary" @click="editCustomer()" class="but">保存</el-button>
            <el-button @click="cancel()"  class="but"> 取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "EditClient",
        data() {
            return {
                ruleForm:{
                    cid:'',
                    cname:'',
                    caddress:'',
                    cphone:'',
                    num:'',
                },
                rules:{
                    cname:[
                        {required:true,message:'请输入顾客姓名',trigger:'blur'},
                        {min:2,max:15,message:'长度在2-15个字符',trigger: 'blur'}
                    ],
                    caddress:[
                        {required:true,message:'请输入顾客住址',trigger:'blur'},
                        {min:3,message:'长度大于3个字符',trigger: 'blur'}
                    ],
                    cphone: [
                        {required:true,message:'请输入顾客联系方式',trigger:'blur'},
                        {min:6,max:11,message:'长度小于11个字符',trigger: 'blur'}
                    ]
                },
                editclient: false,
            };
        },
        methods: {
            init(cid) {  //弹窗
                var that = this;
                that.editclient = true;
                this.cid = cid;
                this.getCustomer();
            },
            cancel() {
                var that = this;
                that.editclient = false;
            },
            //显示顾客信息
            getCustomer() {
                var that = this;
                this.axios
                    .get("http://localhost:8080/customer/getById?cid=" + this.cid)
                    .then(function (response) {
                        that.ruleForm = response;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            /*编辑顾客请求*/
            editCustomer() {
                var that = this;
                let cname = this.ruleForm.cname;
                let caddress = this.ruleForm.caddress;
                let cphone = this.ruleForm.cphone;
                let num = this.ruleForm.num;
                that.axios
                    .post("http://localhost:8080/customer/editCustomer?caddress=" + caddress + "&cid=" + this.cid +"&cname=" + cname + "&cphone=" + cphone + "&num=" + num)
                    .then(function(response){
                        that.cancel();
                        that.$emit("updateData");
                        that.$refs['ruleFormRef'].resetFields();
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                this.$message({
                    type:'success',
                    message:"修改成功！"
                });
            },
        }
    }
</script>

<style scoped>
    .em{
        height: 100%;
        overflow: auto;
    }
    .info-body{
        display: flex;
        justify-content: space-around;
    }
    .title{
        font-size: 25px;
        color: #1E90FF;
        margin-top: -25px;
    }
    .form-info{
        display: flex;
        flex-direction: column;
    }
    .but{
        margin-right: 50px;
        margin-left: 70px;
    }
</style>